import React, { useState } from 'react';
import { Table, Card, Button, Select, Tooltip } from 'antd';
import { InfoCircleOutlined, PlusCircleOutlined } from '@ant-design/icons';
import SpecificationModal from './SpecificationModal';

const SKUTable = () => {
  const [modalVisible, setModalVisible] = useState(false);
  const [selectedSpecs, setSelectedSpecs] = useState(['volume', 'color']); // 默认选中容量和颜色

  const handleSpecOk = (newSpecs) => {
    setSelectedSpecs(newSpecs);
    setModalVisible(false);
  };

  const getSpecColumns = () => {
    const specOptions = {
      volume: { title: '容量', width: 100 },
      color: { title: '颜色', width: 100 },
      sheets: { title: '张数', width: 100 },
      pieces: { title: '片数', width: 100 },
      levels: { title: '档数', width: 100 },
      function: { title: '功能', width: 100 },
      size: { title: '尺寸', width: 100 },
      quantity: { title: '件数', width: 100 },
      style: { title: '款式', width: 100 },
      colors: { title: '色数', width: 100 },
      boxes: { title: '盒数', width: 100 },
      books: { title: '本数', width: 100 },
      appearance: { title: '外观', width: 100 },
      specification: { title: '规格', width: 100 },
      model: { title: '型号', width: 100 },
    };

    return selectedSpecs.map(spec => ({
      title: specOptions[spec]?.title || spec,
      dataIndex: spec,
      width: specOptions[spec]?.width || 100,
      align: 'center',
    }));
  };

  const baseColumns = [
    {
      title: '序号',
      dataIndex: 'index',
      width: 60,
      align: 'center',
    },
    {
      title: (
        <span>
          <span style={{ color: '#ff4d4f' }}>*</span>
          物料编码
          <Tooltip title="提示信息">
            <InfoCircleOutlined style={{ marginLeft: 4, color: '#999' }} />
          </Tooltip>
        </span>
      ),
      dataIndex: 'materialCode',
      width: 150,
    },
    {
      title: (
        <span>
          <span style={{ color: '#ff4d4f' }}>*</span>
          代次
          <Tooltip title="提示信息">
            <InfoCircleOutlined style={{ marginLeft: 4, color: '#999' }} />
          </Tooltip>
        </span>
      ),
      dataIndex: 'generation',
      width: 80,
    },
    {
      title: (
        <span>
          <span style={{ color: '#ff4d4f' }}>*</span>
          条形码
          <Tooltip title="提示信息">
            <InfoCircleOutlined style={{ marginLeft: 4, color: '#999' }} />
          </Tooltip>
        </span>
      ),
      dataIndex: 'barcode',
      width: 150,
    },
  ];

  const specGroupColumn = {
    title: (
      <div style={{ textAlign: 'center' }}>
        <span>
          <span style={{ color: '#ff4d4f' }}>*</span>
          规格名称
          <Tooltip title="提示信息">
            <InfoCircleOutlined style={{ marginLeft: 4, color: '#999' }} />
          </Tooltip>
        </span>
        <PlusCircleOutlined 
          style={{ 
            marginLeft: 8, 
            color: '#1890ff',
            fontSize: 16,
            cursor: 'pointer'
          }} 
          onClick={() => setModalVisible(true)}
        />
      </div>
    ),
    children: getSpecColumns(),
  };

  const afterSpecColumns = [
    {
      title: (
        <span>
          <span style={{ color: '#ff4d4f' }}>*</span>
          SKU规格名称
          <Tooltip title="提示信息">
            <InfoCircleOutlined style={{ marginLeft: 4, color: '#999' }} />
          </Tooltip>
        </span>
      ),
      dataIndex: 'skuSpecName',
      width: 150,
    },
    {
      title: (
        <span>
          SKU名称
          <Tooltip title="提示信息">
            <InfoCircleOutlined style={{ marginLeft: 4, color: '#999' }} />
          </Tooltip>
        </span>
      ),
      dataIndex: 'skuName',
      width: 200,
    },
    {
      title: (
        <span>
          <span style={{ color: '#ff4d4f' }}>*</span>
          商品状态
          <Tooltip title="提示信息">
            <InfoCircleOutlined style={{ marginLeft: 4, color: '#999' }} />
          </Tooltip>
        </span>
      ),
      dataIndex: 'status',
      width: 150,
      render: () => (
        <Select 
          defaultValue="new" 
          style={{ width: '100%' }}
          options={[
            { value: 'new', label: '新品已立项' },
          ]}
        />
      ),
    },
  ];

  const columns = [...baseColumns, specGroupColumn, ...afterSpecColumns];

  const data = [
    {
      key: '1',
      index: 1,
      materialCode: 'BC060000001',
      generation: '01',
      barcode: '6900000001',
      volume: '300ml',
      color: '红色',
      skuSpecName: '300ml红色',
      skuName: '商品名称-SKU名称',
      status: 'new',
    },
    {
      key: '2',
      index: 2,
      materialCode: 'BC060000002',
      generation: '01',
      barcode: '6900000002',
      volume: '500ml',
      color: '蓝色',
      skuSpecName: '500ml蓝色',
      skuName: '商品名称-SKU名称',
      status: 'new',
    },
    {
      key: '3',
      index: 3,
      materialCode: 'BC060000003',
      generation: '01',
      barcode: '6900000003',
      volume: '800ml',
      color: '绿色',
      skuSpecName: '800ml绿色',
      skuName: '商品名称-SKU名称',
      status: 'new',
    },
  ];

  return (
    <>
      <Card
        title={
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <div style={{ display: 'flex', alignItems: 'center' }}>
              <div style={{ 
                width: 4, 
                height: 14, 
                backgroundColor: '#1890ff', 
                marginRight: 8 
              }} />
              <span>SKU信息</span>
            </div>
            <div>
              <Button type="primary" style={{ marginRight: 8 }}>导出</Button>
              <Button type="primary">导入</Button>
            </div>
          </div>
        }
      >
        <Table
          columns={columns}
          dataSource={data}
          bordered
          size="small"
          pagination={false}
          scroll={{ x: 'max-content' }}
        />
      </Card>
      <SpecificationModal
        visible={modalVisible}
        onCancel={() => setModalVisible(false)}
        onOk={handleSpecOk}
        selectedSpecs={selectedSpecs}
      />
    </>
  );
};

export default SKUTable;
